<template>
	<view class="container">
		<view class="top-info">
			<view class="title">
				{{ $t('wallet.totalAssets') }}
				<view class="icon-box flex-item-center">
					<image @click="handleEarth" src="@/static/earth-icon.png"></image>
					<image @click="handleNotifications" src="@/static/more-icon.png"></image>
				</view>
			</view>

			<view class="assets-box">
				<view class="full-name">
					<view class="name-title">{{ $t('wallet.fullName') }}</view>
					<view class="name">Arya Wijaya</view>
				</view>
				<view class="account-box" @click="handleAddress">
					{{ formatWalletAddress(primaryWallet.walletAddress) }}
				</view>
				<view class="money-box">
					<text>{{ $t('wallet.balance') }}</text>
					<view>{{ formatNumber(totalAssets) }} {{ primaryWallet.tokenType }}</view>
				</view>
				<view class="round-box flex-item-center"></view>
			</view>

			<view class="other-box flex-just-between">
				<view class="item" @click="handleRecharge">
					<image src="/static/recharge-icon.png" mode=""></image>
					<view>{{ $t('wallet.recharge') }}</view>
				</view>
				<view class="item" @click="handleReflect">
					<image src="/static/reflect-icon.png" mode=""></image>
					<view>{{ $t('wallet.reflect') }}</view>
				</view>
			</view>
		</view>

		<view class="title small">{{ $t('wallet.totalAssets') }}</view>

		<!-- 资产列表循环 -->
		<view class="list-box">
			<view class="item-box flex-just-between" v-for="(wallet, index) in walletList" :key="index">
				<view class="left-box flex-item-center">
					<image :src="wallet.logo"></image>
					<view class="card-name">{{ $t(`wallet.token.${wallet.tokenType}`) }}</view>
				</view>
				<view class="right-box flex-item-center flex-just-end">
					<view class="label-box flex-item-center" v-if="wallet.action">
						<view class="label" @click="handleRecharge">{{ $t('wallet.recharge') }}</view>
						<view class="label green" v-if="wallet.availableAmount > 0" @click="handleReflect">
							{{ $t('wallet.reflect') }}
						</view>
						<view class="label-placeholder" v-if="wallet.availableAmount <= 0"></view>
					</view>
					<view class="money-box">
						<text>{{ formatNumber(wallet.availableAmount) }}</text>
						<view v-if="wallet.showLock">{{ $t('wallet.frozen') }}: {{ formatNumber(wallet.lockedAmount) }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import memberApi from '@/api/member.js'

	export default {
		data() {
			return {
				walletList: [{
						'logo': '/static/mdf-logo.png',
						'tokenType': "MDF",
						'availableAmount': 200000,
						'lockedAmount': 100000,
						'action': true,
						'showLock': true
					},
					{
						'logo': '/static/icon.png',
						'tokenType': "MDH",
						'availableAmount': 0,
						'lockedAmount': 100000,
						'action': true,
						'showLock': false
					},
					{
						'logo': '/static/icon.png',
						'tokenType': "AirdropMDF",
						'availableAmount': 200000,
						'lockedAmount': 100000,
						'action': false,
						'showLock': false
					},
					{
						'logo': '/static/icon.png',
						'tokenType': "NodeMDF",
						'availableAmount': 200000,
						'lockedAmount': 100000,
						'action': false,
						'showLock': false
					},
				], // 所有钱包资产列表
				primaryWallet: {}, // 主要钱包（用于顶部显示）
				totalAssets: 0 // 总资产
			}
		},
		created() {
			this.loadWalletData()
		},
		methods: {
			// 加载钱包数据
			async loadWalletData() {
				try {
					const res = await memberApi.getUserWallet()
					console.log(res)
				} catch (error) {
					console.error('获取钱包数据失败:', error)
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					})
				}
			},
			// 格式化钱包地址 (显示前6后4)
			formatWalletAddress(address) {
				if (!address || address.length < 10) return '···· ···· ····'
				return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
			},

			// 数字千分位格式化
			formatNumber(num) {
				if (typeof num !== 'number') return '0'
				return num.toLocaleString('en-US')
			},

			// 跳转充值页面
			handleRecharge() {
				uni.navigateTo({
					url: '/pages/my/recharge/recharge'
				})
			},

			// 跳转提现页面
			handleReflect() {
				uni.navigateTo({
					url: '/pages/my/transfer-accounts/index'
				})
			},

			handleAddress() {
				uni.navigateTo({
					url: '/pages/my/save-address/saveaddress'
				})
			},

			handleNotifications() {
				uni.navigateTo({
					url: '/pages/my/notification/notification'
				})
			},

			handleEarth() {
				uni.navigateTo({
					url: '/pages/my/shop-mall/shopmall'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 0 40rpx;
		min-height: 100vh;
		background: #FBFCFF;

		.top-info {
			padding: 0 24rpx;
		}

		.title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 38rpx;
			font-size: 40rpx;

			&.small {
				font-size: 36rpx;
			}

			.icon-box {
				image {
					width: 36rpx;
					height: 36rpx;

					&:first-child {
						margin-right: 20rpx;
					}

					&:last-child {
						float: right;
						margin-left: auto;
						width: 38rpx;
						height: 32rpx;
					}
				}
			}
		}

		.assets-box {
			width: 100%;
			height: 416rpx;
			background: url('/static/block-bg.png') no-repeat;
			background-size: 100%;
			color: #fff;
			padding: 48rpx 40rpx 0 48rpx;
			position: relative;

			.name-title {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.5);
			}

			.name {
				margin-top: 6rpx;
				font-size: 32rpx;
				line-height: 44rpx;
			}

			.account-box {
				// font-size: 80rpx;
			}

			.money-box {
				font-size: 68rpx;

				text {
					margin-bottom: 4rpx;
					display: block;
					font-size: 32rpx;
					color: rgba(255, 255, 255, 0.5);
				}
			}

			.round-box {
				position: absolute;
				top: 48rpx;
				right: 40rpx;

				view {
					width: 64rpx;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.75);
					border-radius: 50%;

					&:last-child {
						margin-left: -20rpx;
					}
				}
			}
		}

		.other-box {
			margin: 58rpx 0 70rpx;

			.item {
				width: 292rpx;
				height: 256rpx;
				background-color: #fff;
				box-shadow: 20rpx 20rpx 80rpx 0rpx rgba(7, 17, 53, 0.04);
				border-radius: 46rpx;
				text-align: center;
				font-size: 36rpx;
				color: #999;
				overflow: hidden;

				image {
					margin: 20rpx auto 0;
					display: block;
					width: 144rpx;
					height: 144rpx;
				}
			}
		}

		.list-box {
			.item-box {
				margin-bottom: 40rpx;
				width: 100%;
				height: 164rpx;
				background-color: #fff;
				box-shadow: 10rpx 10rpx 40rpx 0rpx rgba(223, 223, 223, 0.2);
				border-radius: 32rpx;
				font-size: 28rpx;
				padding: 0 24rpx 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-box {
					display: flex;
					align-items: center;
					flex: 0 0 auto;

					image {
						flex: 0 0 80rpx;
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
					}

					.card-name {
						font-size: 28rpx;
					}
				}

				.right-box {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex: 1;

					.label-box {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-left: 50rpx;
						/* 从左开始排列 */
						flex: 0 0 172rpx;
						/* 固定宽度，确保按钮区域一致 */
						margin-right: 20rpx;

						.label {
							flex: 0 0 76rpx;
							/* 固定宽度 */
							margin-right: 10rpx;
							/* 按钮之间的间距 */
							padding: 0 14rpx;
							height: 48rpx;
							line-height: 48rpx;
							background-color: #6CAEFB;
							border-radius: 24rpx;
							font-size: 24rpx;
							color: #fff;
							text-align: center;

							&.green {
								background-color: #2b8c9d;
							}
						}

						.label-placeholder {
							flex: 0 0 76rpx;
							/* 与 label 宽度一致 */
							margin-right: 10rpx;
							height: 48rpx;
							visibility: hidden;
						}
					}

					.money-box {
						text-align: right;
						color: #999;
						flex: 1;
						/* 让 money-box 占满剩余空间，确保右对齐 */

						text {
							color: #4162FF;
						}

					}
				}
			}
		}
	}
</style>